@page "/"
@using Microsoft.JSInterop

@inject IJSRuntime JS

<div class="menu">
<button >登录</button>
</div>

<span class="merit" hidden="@_merit">功德+1</span>
<div class="content">
    <img src="/muyu.png" class="muyu @_class" @onclick="OnClick" />
</div>

<audio hidden id="voice" src="/voice.mp3">
</audio>
@code
{
    private string? _class;
    private bool _merit = true;
    public async Task OnClick()
    {
        _merit = false;
        _class = "muyu-click";
        await JS.InvokeVoidAsync("play", "voice");
        _ = Task.Run(async () =>
       {
           await Task.Delay(200);
           _class = "";
           await InvokeAsync(StateHasChanged);
       });

        _ = Task.Run(async () =>
        {
            await Task.Delay(1000);
            _merit = true;
            await InvokeAsync(StateHasChanged);
        });
    }
}

<style>
button{
    height:80px;
    width:160px;

}
    .menu{
        height:80px;
        width:100%;
    }
    body {
        background-color: black;
    }
    .merit {
        position: relative;
        left: 30px;
        animation: box 1s infinite;
    }

    .muyu {
        transition: 0.2s;
        width:60%;
        height: 60%;
    }

    .muyu-click {
        transition: 0.1s;
        transform: scale(0.9);
    }

    .content {
        position: relative;
        float: left;
        padding-left: 40%;
        background-color: black;
        display:flex;
        align-items:center;/*所有子元素都垂直居中了*/
    }

    @@keyframes box {
        0% {
            top: 100px;
            color: blue;
        }

        100% {
            top: 20px;
            color: chartreuse;
        }
    }
</style>